<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			html,body {
				width: 100%;
				height: 100%;
			}
			
			* {
				padding: 0;
				margin: 0;
			}
			
			.header {
				position: fixed;
				width: 100%;
				background-color: #23aff7;
				top: 0;
				height: 100px;
				box-sizing: border-box;
				z-index: 100;
			}
			
			.header .logo {
				height: 80px;
				padding-top: 10px;
				margin-left: 10%;
			}
			
			.header h1 {
				color: #FFFFFF;
				font-size: 36px;
				padding-bottom: 10px;
			}
			.header h3 {
				left: 0;
				bottom: -10px;
				color: #ffEEEE;
			}
			
			.header .search {
				position: absolute;
				height: 40px;
				min-width: 300px;
				width: 25%;
				top: 30px;
				right: 10%;
			}
			.header .search input {
				height: 100%;
				width: 100%;
				border: none;
				outline: none;
				border-radius: 20px;
				padding: 0 30px;
				font-size: 24px;
				color: #1080ba;
				z-index: 200;
			}
			
			
			.group {
				position: fixed;
				width: 200px;
				top: 100px;
				padding: 10px 0;
				box-sizing: border-box;
				bottom: 0;
				overflow-x: hidden;
				overflow-y: auto;
				border-right: 1px solid #dddddd;
				z-index: 50;
			}
			
			.group > div .name {
				transition-duration: 0.2s;
				-webkit-transition-duration: 0.2s;
			}
			.group > div:hover .name {
				background-color: #d6f1ff;
			}
			
			.gitem,
			.gitemon {
				position: relative;
			}
			.gitem .name,
			.gitemon .name {
				display: flex;
				padding: 0 15px;
				height: 50px;
				align-items: center;
				font-size: 20px;
				border-bottom: 1px solid #EEEEEE;
			}
			.gitem input {
				position: absolute;
				z-index: 120;
				height: 50px;
				width: 100%;
				top: 0;
				opacity: 0;
			}
			.gitem label {
				position: absolute;
				height: 10px;
				width: 10px;
				border: 1px solid #AAAAAA;
				border-bottom: transparent;
				border-right: transparent;
				top: 20px;
				right: 10px;
				-webkit-transform-origin: 25% 50%;
				transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
			}
			.gitem input:checked + label {
				transform: rotate(225deg);
				-webkit-transform: rotate(225deg);
			}
			.gitem input:checked ~ ul{
				display: none;
			}
			.gitem ul li {
				display: flex;
				list-style: none;
				margin-left: 20px;
				font-size: 18px;
				height: 40px;
				align-items: center;
				border-bottom: 1px solid #EEEEEE;
				transition-duration: 0.2s;
				-webkit-transition-duration: 0.2s;
			}
			.gitem ul li:hover {
				transform: translateX(5px);
				-webkit-transform: translateX(5px);
				color: #1c8fca;
			}
			
			
			.viewimgs {
				position: absolute;
				top: 100px;
				left: 200px;
				right: 0;
				bottom: 0;
				overflow-x: hidden;
				overflow-y: auto;
			}
			
			.floatlayout {
				height: 100%;
				border: 1px solid transparent;
			}
			
			.floatcol {
				float: left;
				width: 33%;
				height: 100%;
				border: 3px solid #000000;
			}
			
		
		</style>
		
	</head>
	<body>
		
		<div class="header">
			<div class="logo">
				<h1>FACE</h1>
				<h3>XXXXXXXXXXX</h3>
			</div>
			<div class="search">
				<input type="text" />
			</div>
		</div>
		
		<div class="group">
			<div class="gitem">
				<div class="name">AAAA</div>
				<input type="checkbox" checked="checked" />
				<label></label>
				<ul>
					<li>111</li>
					<li>222</li>
					<li>333</li>
					<li>444</li>
				</ul>
			</div>
			<div class="gitem">
				<div class="name">AAAA</div>
				<input type="checkbox" checked="checked" />
				<label></label>
				<ul>
					<li>111</li>
					<li>222</li>
					<li>333</li>
					<li>444</li>
				</ul>
			</div>
			
			<div class="gitemon">
				<div class="name">AAAAA</div>
			</div>
			<div class="gitemon">
				<div class="name">AAAAA</div>
			</div>
			<div class="gitemon">
				<div class="name">AAAAA</div>
			</div>
			
		</div>

		<div class="viewimgs">
			<div class="floatlayout">
				<div class="imgitem">
					<img src="images/face/small/0EAD3844DF8D4558350E5CE8FC3ED705jpgjpg.jpg" />
					<img src="images/face/small/0EAD3844DF8D4558350E5CE8FC3ED705jpgjpg.jpg" />
					<img src="images/face/small/0EAD3844DF8D4558350E5CE8FC3ED705jpgjpg.jpg" />
				</div>
			</div>
		</div>
		
	</body>
	
	
	
	<script>
		
		
		var sett = {
			page: 20,
			path1: "",
			path2: ""
		}
		
		
			
		var xhr = new XMLHttpRequest();
		xhr.timeout = 16000;
		xhr.responseType = "text";
		xhr.open('GET', '/face', true);
		xhr.onload = function(){
			if(this.status == 200||this.status == 304){
		        var txt = this.responseText;
		        var obj = JSON.parse(txt);
		        window.imgsobj = obj;
		        
		        setDom(obj);
		    }
		}
		xhr.send(null);
		
		// 数据设置到 dom上
		function setDom(data){
			//1. 生成类别树
		}
		
		
		
	</script>
	
	
</html>
